<template>
  <div>
    <div class="manageUserHeader">
      <label>
        商家id&nbsp;&nbsp;
        <input @keyup.enter="getAuditStores" v-model="searchData.userId" type="text" placeholder="请输入用户id">
      </label>
      <label>
        商家名称&nbsp;&nbsp;
        <input @keyup.enter="getAuditStores" v-model="searchData.name" type="text" placeholder="请输入用户昵称">
      </label>
      <label>
        电话号码&nbsp;&nbsp;
        <input @keyup.enter="getAuditStores" v-model="searchData.tel" type="text" placeholder="请输入电话号码">
      </label>
    </div>

    <div class="manageUserBody">
      <table>
        <thead>
        <tr>
          <td>商家id</td>
          <td>店铺名称</td>
          <td>店铺logo</td>
          <td>店铺电话</td>
          <td>
            操作
          </td>
        </tr>
        </thead>
        <tbody v-if="storeListData.length">
        <tr v-for="(item,index) in storeListData">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <img :src="item.logoUrl" alt="图片未加载">
          </td>
          <td>{{item.telephone}}</td>
          <td>
            <span class="greenText" @click="receive(index)">通过</span>
            <span class="grayText" data-bs-toggle="modal" data-bs-target="#staticBackdrop" @click="lookData(index)">查看</span>
            <span class="redText" @click="refuse(index)">失败</span>
          </td>
        </tr>
        </tbody>
        <template v-else>
          <el-empty description="无数据" />
        </template>
      </table>
    </div>

    <nav style="margin-top: 40px" aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item" :class="{disabled:pageData.current===1}" @click="choosePages(1)">
          <a class="page-link">首页</a>
        </li>
        <li v-for="(item,index) in pageData.pages>3?3:pageData.pages" @click="choosePages(index+1)" class="page-item"><a class="page-link" href="#">{{index+1}}</a></li>
        <li class="page-item" :class="{disabled:pageData.current===pageData.pages}" @click="choosePages(pageData.pages)">
          <a class="page-link" href="#">末尾</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">查看店家</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="header">
            <img :src="currentStore.store.logoUrl" alt="">
            <div class="storeInfo">
              <div class="title">
                <h4>{{currentStore.store.name}}</h4>
                <h4>{{currentStore.store.category}}</h4>
              </div>
              <div class="fee">
                <h6>打包费：&nbsp;{{currentStore.store.packageFee}}</h6>
                <h6>电话：&nbsp;{{currentStore.store.telephone}}</h6>
              </div>
              <div class="description">
                <p>{{currentStore.store.description}}</p>
              </div>
            </div>
          </div>

          <div class="bodyAddress">
            <i>地址：&nbsp;{{currentStore?.address?.detail}}</i>
          </div>

          <div class="bodyStoreUrl">
            <b>店内图片:&nbsp;&nbsp;</b>
            <br>
            <img :src="currentStore.store.storeUrl" alt="">
          </div>

          <div class="storeEnvFooter">
            <b>店内环境</b>
            <div class="images">
              <img v-for="item in currentStore.storeEnv" :src="item.url" alt="">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getUsersAPI} from "@/apis/user";
import {ElMessage} from "element-plus";
import {getAuditStoreAPI, getStoreInfoAPI,auditYesAPI,auditNoAPI} from '@/apis/store.js'

const storeListData=ref([])
const currentStore=ref({
  store:{
    id:'',
    name:'123',
    logoUrl:'http://localhost:8081/img/elmlogo.jpg',
    storeUrl:'http://localhost:8081/img/e34dea44-b090-47de-a6a4-79743c8b398c.jpg',
    description:'123',
    telephone:13312341234,
    packageFee:8,
    category:'123',
    status:0,
  },
  address:{
    province:0,
    city:0,
    district:0,
    detail:'',
  },
  storeEnv:[]
})

const searchData=ref({
  userId:'',
  name:'',
  tel:'',
  current:1
})

const pageData=ref({})

const getAuditStores=async ()=>{
  const res=await getAuditStoreAPI(searchData.value);

  if(res.data.code===1)
  {
    storeListData.value=res.data.data.records
    pageData.value=res.data.data
  }
  else
  {
    ElMessage.error(res.data.msg)
  }


}

const choosePages=(current)=>{
  searchData.value.current=current;
  getAuditStores()

  // 移除所有带有 "active" 类的元素的 "active" 类
  document.querySelectorAll(".page-item").forEach((item) => {
    item.removeAttribute("aria-current");
    item.classList.remove("active");
  });

  // 为当前页面的元素添加 "active" 类，并设置 aria-current 属性
  const activePageItem = document.querySelector(`.page-item:nth-child(${searchData.value.current+1})`);
  if (activePageItem) {
    activePageItem.classList.add("active");
    activePageItem.setAttribute("aria-current", "page");
  }
}

const receive=async (index)=>{
    let data=storeListData.value[index]
    data.status=0;

    const res=await auditYesAPI(data);
    if(res.data.code===1)
    {
      ElMessage.success("审核成功")
      getAuditStores()
    }
    else
    {
      ElMessage.error(res.data.msg)
    }
}

const refuse=async (index)=>{
  const res=await auditNoAPI(storeListData.value[index])

  if(res.data.code===1)
  {
    ElMessage.success("审核成功")
    getAuditStores()
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

const lookData=async (index)=>{
  const res=await getStoreInfoAPI(storeListData.value[index].id)

  if(res.data.code===1)
  {
    currentStore.value=res.data.data
  }
  else ElMessage.error(res.data.msg)
}

onMounted(()=>{
  getAuditStores()
})
</script>

<style scoped>
.manageUserHeader
{
  height: 80px;
  width: 100%;
  /*background-color: #02b7fb;*/
  line-height: 80px;
}
.manageUserHeader label
{
  margin-left: 50px;
}
.manageUserHeader input
{
  box-sizing: border-box;
  padding-left: 8px;
  width: 200px;
  height: 40px;
  border: 1px solid #02b7fb;
}

table
{
  margin-left: 30px;
}
td
{
  flex:1;
  text-align: center;
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
thead tr td
{
  font-weight: bold;
  font-size: 18px;
}
tr
{
  display: flex;
  padding-top: 10px;
  width: 1400px;
  text-align: center;
  justify-content: space-evenly;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}
tbody
{
  min-height: 500px;
  margin-top: 10px;
}

td img
{
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.grayText,
.greenText,
.redText
{
  /*font-weight: bold;*/
  font-style: italic;
  /*font-weight: bold;*/
  /*cursor: grab;*/
  font-size: 16px;
  margin: 0 15px;
}
.greenText
{
  color: green;
}
.redText
{
  color: red;
}
.grayText
{
  color: gray;
}

.header
{
  display: flex;
}
.header img
{
  width: 100px;
  height: 100px;
}
.header .storeInfo
{
  flex:1;
  margin-left: 10px;
  height: 100px;
  /*background-color: #02b7fb;*/
}
.header .storeInfo .title
{
  height: 30px;
  line-height: 30px;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
}
.header .storeInfo .title h4
{
  font-weight: bold;
}
.header .storeInfo .title h4:nth-child(2)
{
  margin-right: 50px;
  font-weight: bold;
  color:#02b7fb;
}
.header .storeInfo .fee
{
  height: 30px;
  display: flex;
  line-height: 30px;
  /*color:red;*/
}
.header .storeInfo .fee h6:nth-child(1)
{
  color:red;
  line-height: 30px;
   /*color:black;*/
  margin-right: 50px;
}
.header .storeInfo .fee h6:nth-child(2)
{
  color:orange;
  line-height: 30px;
  /*color:black;*/
  margin-right: 50px;
}
.header .storeInfo .description
{
  height: 40px;
  text-indent: 2em;
  overflow: hidden;
  color:gray;
}
.description p
{
  word-wrap: break-word;
  word-break: break-all;
  max-height: 40px;
}
.bodyAddress
{
  margin-top: 20px;
}
.bodyStoreUrl
{
  /*display: flex;*/
  margin-top: 20px;
}
.bodyStoreUrl img
{
  width: 180px;
  height: 120px;
}
.storeEnvFooter
{
  margin-top: 20px;
}
.storeEnvFooter .images
{
  display: flex;
  flex-wrap: wrap;
}
.storeEnvFooter img
{
  width: 180px;
  height: 120px;
  margin-right: 20px;
}
.modal-body
{
  margin-left: 10px;
}

/*.modal-body .header*/
/*{*/
/*  */
/*}*/
</style>